<template>
	<div class="activity-superMember">
		<!-- 选择身份 -->
		<div class="ident_box">
			<div v-for="(item, index) in ident_list" :key="index" class="list" @click="select(item.url)">
				<div class="title">
					<div class="img"><img :src="item.imgUrl" /></div>
					<h3>{{ item.title }}</h3>
				</div>
				<p>{{ item.txt }}</p>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { querySuperMemberStatus, getBusinessInfo } from '@/api/business';
export default {
	data() {
		return {
			/* 功能模块 */
			ident_list: [
				{
					imgUrl: require('/public/static/img/super-members/invitation.png'),
					title: '邀请者',
					txt: '可设置自己的超级会员模式，并可邀请其他商户参与。',
					url: 'MarketingActivitySuperInviter'
				},
				{
					imgUrl: require('/public/static/img/super-members/participate.png'),
					title: '参与者',
					txt: '自己参与的其他超级会员模式。',
					url: 'MarketingActivitySuperParticipate'
				}
			],

			/* 插件状态 */
			mbStatus: '', // 开通状态 0:未开通 1:已开通 2:欠费停用
			/* 商户信息 */
			busInfo: ''
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mounted() {
		querySuperMemberStatus().then(res => {
			this.mbStatus = res.data.status;
		});
		getBusinessInfo().then(res => {
			this.busInfo = res.data;
		});
	},
	methods: {
		select(url) {
			if (this.mbStatus == 0 && url == 'MarketingActivitySuperInviter') {
				if (this.busInfo.email) {
					this.$router.push({
						name: 'PlugCenterList',
						query: {
							type: 'openSupPlug'
						}
					});
				} else {
					this.$confirm('商户邮箱未设置，请在商家中心补充邮箱', '提示', {
						confirmButtonText: '去补充',
						cancelButtonText: '确定',
						type: 'warning'
					})
						.then(() => {
							this.$router.push({
								name: 'BusinessInfoEdit'
							});
						})
						.catch(() => {});
				}
				return;
			}
			this.$router.push({
				name: url
			});
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.ident_box {
	width: 100%;
	overflow: hidden;
	margin: 50px;

	.list {
		width: 250px;
		min-height: 172px;
		padding: 8px;
		background-color: #ffffff;
		border-radius: 8px;
		float: left;
		margin: 15px;
		.title {
			display: flex;
			justify-content: space-around;
			align-items: center;
			.img {
				width: 100px;
				height: 100px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			h3 {
				font-size: 20px;
				font-weight: bold;
			}
		}
		p {
			font-size: 15px;
			line-height: 20px;
			margin-top: 16px;
		}
		&:hover {
			box-shadow: 0 0 10px #ccc;
			cursor: pointer;
		}
	}
}
</style>
